<template>
    <div class="consultOnline">
        <div class="time">
            {{currentDate}}
        </div>
        <div class="welcome">
            <img src="../common/images/logo.png" alt="">
            <div class="content">
                您好，请输入需要咨询的业务，小招稍后会与您电话联系
            </div>
        </div>
        <ul class="customContent">
            <li>
                <span>预约相关问题</span>
                <div class="customImg">
                    <i class="iconfont icon-geren1"></i>
                </div>
            </li>
        </ul>
        <div class="typeArea">
            <x-input placeholder="请输入需要咨询的业务" v-model="inputValue" :show-clear="false">
                <x-button slot="right" type="primary" mini @click="sendMessage">发送</x-button>
            </x-input>
        </div>
    </div>
</template>
<script>
import { fmtDate } from '@/config/filterDate';
import { XInput, XButton } from 'vux'
export default {
    components: {
        XInput,
        XButton
    },
    data() {
        return {
            currentDate: '',//当前时间
            inputValue: '' //输入内容
        }
    },
    methods: {
        sendMessage() {
            
        }  
    },
    created() {
        let date = new Date();
        this.currentDate = fmtDate(date, 'yyyy-MM-dd hh:mm');
    }
}
</script>

<style lang="less">
.consultOnline {
    height: 100%;
    .time {
        margin: .6rem auto;
        text-align: center;
        font-size: .4rem;
        color: #fff;
        background-color: #b8b8bc;
        width: 5rem;
        border-radius: .15rem;
    }
    .welcome {
        margin: 0 2rem 0 .5rem;
        display: flex;
        img {
            width: 2rem;
            height: 2rem;
            border-radius: .2rem;
        }
        .content {
            font-size: .6rem;
            padding: .4rem .3rem;
            background-color: #fff;
            border-radius: .2rem;
            margin-left: .5rem;
            line-height: 1.3;
        }
    }
    .customContent {
        margin: 0 0 2rem 0;
        &::after {
            display: block;
            clear: both;
            content: '';
        }
        li {
            border-radius: .2rem;
            display: flex;
            margin: 1rem .5rem 1rem 2rem;
            padding: 0;
            width: auto;
            background: transparent;
            float: right;
            span {
                font-size: .6rem;
                padding: .5rem .3rem;
                background-color: #fff;
                border-radius: .2rem;
                margin-right: .5rem;
                line-height: 1.3;
                text-align: left;
                flex: 1;
            }
            .customImg {
                background-color: #35a2f6;
                border-radius: .2rem;
                color: #fff;
                width: 2rem;
                height: 2rem;
                i {
                    font-size: 1.4rem;
                }
            }
        }
    }
    .typeArea {
        position: fixed;
        bottom: 0;
        z-index: 1000;
        width: 100%;
        border: 1px solid #ddd;
        .weui-cell__bd {
            background-color: #fff;
            border-radius: .2rem;
            padding: 0 .4rem;
            padding-bottom: .4rem;
            font-family: '微软雅黑';
            input {
                font-size: .7rem;
                width: 100%;
            }
        }
        .weui-cell__ft {
            .weui-btn {
                font-size: .7rem !important;
                padding: 0rem .4rem;
                margin-top: 0;
                margin-left: .4rem;
            }
        }
    }
}
</style>
